<template>
  <Row class="data-dictionary" v-if="model">
    <Col span="4" class="col-height100">
      <Tree :data="tree" expand @on-select-change="getProPersonList"></Tree>
    </Col>
    <Col span="20" class="col-main">
    <div class="button-s">
      <Button type="primary" v-if="canEdit && control.add" @click="addBtn('add', '1', '新增项目人员')">新增</Button>
      <Button type="primary" v-if="active == 2 &&canEdit && control.checkIn" @click="checkIn">进场</Button>
      <Button type="primary" v-if="active == 1 &&canEdit && control.checkOut" @click="checkOut">离场</Button>
      <Button type="primary" v-if="canEdit && control.del" @click="deleteBtn">删除</Button>
    </div>
    <Tabs value="1" v-model="active" @on-click="activeTab" >
      <TabPane label="在场人员" name="1"></TabPane>
      <TabPane label="离场人员" name="2"></TabPane>
    </Tabs>
    <Table
      border
      ref="selection"
      :columns="columns"
      :data="personList"
      style="font-size:14px;"
      @on-select="selectRiado"
      @on-select-all="selectRiadoAll"
      @on-select-all-cancel = "selectRiadoAllCancel"
    >
      <template slot-scope="{ row, index }" slot="action">
        <span title="生成用户" class="button-class" type="text" v-show="!row.isUser && row.canBeOperator && control.user" @click="createUser(row.personUserOrgId)">生成用户</span>
        <span title="编辑" class="button-class" type="text" v-show="row.canBeOperator && control.edit" @click="addBtn('editor', row.personUserOrgId, '编辑人员')">编辑</span>
        <span title="详情" class="button-class" type="text" v-show="control.detail" @click="addBtn('details', row.personUserOrgId, '人员详情')">详情</span>
        <span title="删除" class="button-class" type="text" v-show="row.canBeOperator && control.del" @click="deleteOne(row.personUserOrgId)">删除</span>
      </template>
    </Table>
    <Row type="flex" justify="center">
      <Col>
      <Page
        class="pagination"
        :total="page.total"
        :current="page.current"
        :page-size="page.pageSize"
        :page-size-opts="[10,20,50,100]"
        @on-change="pageChange"
        @on-page-size-change="sizeChange"
        show-elevator
        show-total
        show-sizer
      />
      </Col>
    </Row>
    </Col>
  </Row>
  <createUserModal @func='getMsg' :personId="personId"
                   v-else-if="!model"></createUserModal>
</template>

<script>
  import createUserModal from './createUserModal.vue'
  import { getUserInLocalstorage } from '@/libs/util'
  export default {
    name: 'project-person',
    components: { createUserModal },
    data() {
      return {
        model:true,
        active:'1',
        canEdit:true,
        activeIndex: 0,
        typeCode: '',
        deleteList: [],
        tree:[],
        treeList:[],
        treeActive:[],
        personList:[],
        checkPersonList:[],
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '序号',
            align: 'center',
            width: 70,
            render: (h, params) => {
              return h('span', params.index + (this.page.current - 1) * this.page.pageSize + 1)
            }
          },
          {
            title: '姓名',
            key: 'name',
            align: 'center'
          },
          {
            title: '联系电话',
            key: 'tel',
            align: 'center'
          },
          {
            title: '职务',
            key: 'postName',
            align: 'center'
          },
          {
            title: '操作',
            width: 350,
            align: 'center',
            slot: 'action'
          }
        ],
        dictList: [],
        typeList: [],
        checkTreeProId:'',
        page: {
          total: 0,
          current: 1,
          pageSize: 10,
          totalPage: 0
        },
        control:{}
      }
    },
    methods: {
      //生成用户
      createUser(personUserOrgId){
        this.personId = personUserOrgId;
        this.model = false;
      },
      //按钮权限
      buttonShow() {
        let buttonList = JSON.parse(localStorage.getItem('buttonList'))
        buttonList.map(val => {
          let key = Object.keys(val).toString()
          if (key === this.$route.name) {
            Object.values(val)[0].map(item => {
              if (item.code == 'P_0203_01') {
                this.control.add = true
              } else if (item.code == 'P_0203_02') {
                this.control.edit = true
              } else if (item.code == 'P_0203_03') {
                this.control.del = true
              } else if (item.code == 'P_0203_04') {
                this.control.detail = true
              } else if (item.code == 'P_0203_05') {
                this.control.user = true
              } else if (item.code == 'P_0203_06') {
                this.control.checkIn = true
              } else if (item.code == 'P_0203_07') {
                this.control.checkOut = true
              }
            })
          }
        })
      },
      getMsg(code){
        //从子组件获取项目信息
        if(code == 1){
          this.model = true;
          this.getProPersonList(this.treeActive);
        }else{
          this.model = true;
        }
      },
      addBtn(type, id, name) {
        let data = this.treeActive;
        if(data.length == 0){
          this.$Message.warning('请先选择部门')
        }else{
          localStorage.setItem('projectPersonTree', JSON.stringify(data[0]));
          if(type == 'add'){
            if(data[0].type == 4 || data[0].type == 6 || data[0].type == 7 || data[0].type == 8){
              let deptId = data[0].objectId;
              this.$router.push({
                name:`project-person-add`,
                params: {
                  type:type,
                  deptId:deptId,
                  name:name,
                }
              })
            }else{
              this.$Message.warning('请先选择部门')
            }
          }else if(type == 'editor'){
            let deptId = data[0].objectId;
            this.$router.push({
              name:`project-person-edit`,
              params:{
                type:type,
                name:name,
                deptId:deptId,
                id:id
              },
            })
          }else{
            let deptId = data[0].objectId;
            this.$router.push({
              name:`project-person-detail`,
              params:{
                type:type,
                name:name,
                deptId:deptId,
                id:id
              },
            })
          }

        }
      },
      activeTab(code){
        this.active = code;
        this.getProPersonList(this.treeActive);
      },
      //删除
      deleteOne(id){
        this.$Modal.confirm({
          title: '温馨提示',
          closable: true,
          content: '确认删除吗？',
          width: 360,
          onOk: () => {
            this.$api.ProjectPerson.onePersonDelete(id).then(res => {
              if (res.code === 200) {
                this.$Message.success('删除成功')
                this.getProPersonList(this.treeActive);
              } else {
                this.$Message.error(res.message)
              }
            })
          }
        })
      },
      //批量删除
      deleteBtn() {
        if (this.checkPersonList.length <= 0) {
          this.$Message.warning('请选择要删除的数据')
          return false
        }
        this.$Modal.confirm({
          title: '温馨提示',
          closable: true,
          content: '确认删除吗？',
          width: 360,
          onOk: () => {
            this.personDelete(this.checkPersonList)
          }
        })
      },
      //获取项目部门树
      getTree(){
        this.$api.ProjectPerson.getOrgTree().then(res => {
          if (res.code === 200) {
            this.tree = res.data
            this.getProPersonList(this.tree)
            res.data.forEach(item=>{
              this.treeList.push(item);
              if(item.children.length>0){
                item.children = this.getCheildItem(item.children);
              }
            })
          }
        })
      },
      //递归树状结构
      getCheildItem(data){
          let item = data;
          const arr = [];
          item.forEach(val => {
            this.treeList.push(val);
            let obj = {};
            obj.title = val.title;
            obj.parentId = val.parentId;
            obj.objectId = val.objectId;
            obj.type = val.type;
            obj.children = [];
            if(val.children.length > 0){

              obj.children = this.getCheildItem(val.children)
            }
            arr.push(obj);
          })
        return arr
      },
      typeListClick(item, index) {
        this.activeIndex = index
        this.typeCode = item.code
        this.getDictList(item.code)
      },
      //循环查询父级
      getParent(id){
          for (var i = 0, length = this.treeList.length; i < length; i++){
            let item = this.treeList[i];
            if(item.objectId == id) {
              if (item.type == 2) {
                this.checkTreeProId = item.objectId;
                return
              } else {
                this.getParent(item.parentId);
              }
            }
          }
      },
      getProPersonList(data) {
        if(data.length>0){
          this.checkTreeProId = '';
          let userInfo = getUserInLocalstorage();
          let userTeamId = userInfo.projectTeamId;
          this.getParent(data[0].parentId);
          if(!userTeamId){
            this.canEdit = false;
          }else if(userTeamId == this.checkTreeProId){
            this.canEdit = true;
          }else{
            this.canEdit = false;
          }
          this.treeActive = data;
          if(data.length>0){
            let params = {
              currentPage: this.page.current,
              pageSize: this.page.pageSize,
              whereMap: {}
            }
            if(this.active == 1){
              params.whereMap.workStatus = 'WORK_AREA_STATE_1';
            }else{
              params.whereMap.workStatus = 'WORK_AREA_STATE_2';
            }

            if(data[0].type == 1 || data[0].type == 5){
              params.whereMap.enterpriseId = data[0].objectId;
            }else if(data[0].type == 2){
              params.whereMap.projectTeamId = data[0].objectId;
            }else if(data[0].type == 3){
              params.whereMap.workPointId = data[0].objectId;
            }
            else if(data[0].type == 4 || data[0].type == 6 || data[0].type == 7 || data[0].type == 8){
              params.whereMap.deptId = data[0].objectId;
            }
            params.whereMap.searchType = 2;
            this.$api.ProjectPerson.getProPersonList(params).then(res => {
              if (res.code === 200) {
                this.personList = res.data.resultObject
                this.page.total = res.data.totalRecord
                this.page.totalPage = res.data.totalPages
              } else {
                this.$Message.error(res.data.data)
              }
            })
          }
        }else{
          this.treeActive = [];
        }
      },
      personDelete(params) {
        let data = [];
        params.forEach(item=>{
          data.push(item.personUserOrgId)
        })
        this.$api.ProjectPerson.personDelete(data).then(res => {
          if (res.code === 200) {
            this.$Message.success('删除成功');
            this.getProPersonList(this.treeActive);
          } else {
            this.$Message.error(res.message)
          }
        })
      },

      //全选
      selectRiadoAll(e) {
        this.checkPersonList = e
      },
      //人员进场
      checkIn(){
        if(this.checkPersonList.length == 0){
          this.$Message.warning('请选择进场人员')
          return;
        }
        let personIdList = [];
        this.checkPersonList.forEach(item=>{
          personIdList.push(item.personUserOrgId);
        })

        this.$api.ProjectPerson.checkIn(personIdList).then(res => {
          if (res.code === 200) {
            this.$Message.success('进场成功')
            this.getProPersonList(this.treeActive)
          } else {
            this.$Message.error(res.message)
          }
        })
      },
      //人员离场
      checkOut(){
        if(this.checkPersonList.length == 0){
          this.$Message.warning('请选择离场人员')
          return;
        }
        let personIdList = [];
        this.checkPersonList.forEach(item=>{
          personIdList.push(item.personUserOrgId);
        })
        this.$api.ProjectPerson.checkOut(personIdList).then(res => {
          if (res.code === 200) {
            this.$Message.success('离场成功')
            this.getProPersonList(this.treeActive)
          } else {
            this.$Message.error(res.message)
          }
        })
      },
      selectRiadoAllCancel(){
        this.checkPersonList = [];
      },
      //单选
      selectRiado(e) {
        this.checkPersonList = e
      },
      pageChange(current) {
        this.page.current = current
        this.getProPersonList(this.treeActive)
      },
      sizeChange(size) {
        this.page.pageSize = size
        this.getProPersonList(this.treeActive)
      }
    },
    mounted() {
      this.buttonShow();
      this.getTree();
    },
    activated(){
        this.page = {
            total: 0,
            current: 1,
            pageSize: 10,
            totalPage: 0
        },
        this.getProPersonList(this.treeActive)
    }
  }
</script>

<style lang="scss" scoped>
  .data-dictionary {
    height: calc(100% - 0px);
    .col-height100 {
      padding:20px;
      height: 100%;
      border-right: 1px solid #ebeef1;
      overflow: auto;
      p {
        padding: 10px;
      }
    }
    .col-main {
      padding: 10px;
      .button-s {
        margin-bottom: 15px;
        button {
          margin-right: 15px;
        }
      }
    }
  }
  .ul-list {
    list-style: none;
    //height: calc(100% - 10px);
    background-color: #ffffff;
    li {
      height: 45px;
      line-height: 45px;
      border-bottom: 1px solid #ebeef1;
      padding: 0 25px;
      cursor: pointer;
      font-size: 14px;
      //overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
      position: relative;
      .tooltip {
        position: absolute;
        right: 10px;
        top: 0px;
      }
      .icon {
        color: #1e88f5;
      }
      &.active {
        color: #2d8cf0;
        box-sizing: border-box;
      }
    }
    li:hover {
      color: #2d8cf0;
    }
  }
</style>
